<style>
  .detail_coupon_box_style {
    display:inline-block; float:left;border:1px solid #808080ba;width:212px;height:94px;position: relative;padding:8px 10px;margin:20px 15px
  }
  .coupon_num_style{
    position: absolute;left: 35%;bottom: -22px;
  }
</style>
<template>
    <div>
      <Portlet title="优惠券">
        <el-row>
          <div class="detail_coupon_box_style"
               :style="{'background': 'url(/api/ms-mongodb/file/download?fileId=' + detail.couponsPic + ')', 'background-size': 'cover', 'background-repeat': 'no-repeat'}" >
            <span class="coupon_num_style"> x {{detail.num}} 张</span>
          </div>
        </el-row>
      </Portlet>
      <Portlet>
        <el-row>
          <div v-html="detail.memo"></div>
        </el-row>
      </Portlet>
    </div>
</template>
<script>
import {dotData} from '@/utils'
export default {
  name: 'couponShow',
  data() {
    return {
      id: this.$route.params.id,
      detail: {}
    }
  },
  created() {
    this.getCurrentDetail()
  },
  methods: {
    getCurrentDetail() {
      this.$ajax.get('/ms-fahuobao-user/wallet/get-coupons', {state: '1', couponsConfigId: this.id}).then(response => {
        if (response.success) {
          if (Array.isArray(response.data) && response.data.length) {
            this.detail = dotData(response, 'data[0]')
          }
        }
      })
    }
  }
}
</script>
